.btn, .btn-l {
	text-align:center
}

.btn-l .line, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block
}

.CodeMirror-code, .CodeMirror-scroll, :focus {
	outline:0
}

a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:0 0
}

body {
	line-height:1;
	font:14px "Lucida Grande", Helvetica, Arial, sans-serif;
	background:#444
}

ol, ul {
	list-style:none
}

blockquote, q {
	quotes:none
}

.q:after, blockquote:after, blockquote:before, q:before {
	content:'';
	content:none
}

.btn-l .line:after, .btn-l .line:before, .cm-tab-wrap-hack:after {
	content:''
}

del, ins {
	text-decoration:none
}

table {
	border-collapse:collapse;
	border-spacing:0
}

b {
	margin-top:10px
}

a {
	color:#000
}

.btn {
	position:absolute;
	top:0;
	z-index:30;
	width:40px;
	height:40px;
	color:#fff;
	cursor:pointer;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	line-height:40px;
	-webkit-box-shadow:0 1px 6px rgba(255, 255, 255, .2);
	-moz-box-shadow:0 1px 6px rgba(255, 255, 255, .2);
	box-shadow:0 1px 6px rgba(255, 255, 255, .2)
}

.btn-l, .refresh_show .btn-src {
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, .2);
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, .2)
}

.btn-l {
	position:fixed;
	left:10px;
	background-color:#db4437;
	margin-top:8px;
	line-height:33px;
	border-radius:40px;
	box-shadow:0 3px 6px rgba(0, 0, 0, .2)
}

.btn-l .line {
	height:.125rem;
	width:1.25rem;
	background:#fff
}

.btn-l .line:after, .btn-l .line:before {
	display:inline-block;
	height:.125rem;
	background:#fff;
	transition:.3s;
	position:absolute;
	left:0;
	-webkit-transform-origin:.28571rem center;
	-moz-transform-origin:.28571rem center;
	-ms-transform-origin:.28571rem center;
	-o-transform-origin:.28571rem center;
	transform-origin:.28571rem center
}

.btn-l .lines {
	position:relative;
	display:inline-block;
	-webkit-transition:.3s;
	-moz-transition:.3s;
	-ms-transition:.3s;
	-o-transition:.3s;
	transition:.3s;
	-webkit-transform:scale3d(.8, .8, .8) rotate(180deg);
	-moz-transform:scale3d(.8, .8, .8) rotate(180deg);
	-ms-transform:scale3d(.8, .8, .8) rotate(180deg);
	-o-transform:scale3d(.8, .8, .8) rotate(180deg);
	transform:scale3d(.8, .8, .8) rotate(180deg)
}

.btn-l .lines:before {
	width:.8rem;
	top:.3em;
	-webkit-transform:rotate3d(0, 0, 1, 40deg);
	-moz-transform:rotate3d(0, 0, 1, 40deg);
	-ms-transform:rotate3d(0, 0, 1, 40deg);
	-o-transform:rotate3d(0, 0, 1, 40deg);
	transform:rotate3d(0, 0, 1, 40deg)
}

.btn-l .lines:after {
	width:.8rem;
	top:-.3em;
	-webkit-transform:rotate3d(0, 0, 1, -40deg);
	-moz-transform:rotate3d(0, 0, 1, -40deg);
	-ms-transform:rotate3d(0, 0, 1, -40deg);
	-o-transform:rotate3d(0, 0, 1, -40deg);
	transform:rotate3d(0, 0, 1, -40deg)
}

.btn-l .lines-arrow:before {
	top:.35rem;
	width:1.25rem;
	-webkit-transform:rotate3d(0, 0, 1, 0);
	-moz-transform:rotate3d(0, 0, 1, 0);
	-ms-transform:rotate3d(0, 0, 1, 0);
	-o-transform:rotate3d(0, 0, 1, 0);
	transform:rotate3d(0, 0, 1, 0)
}

.btn-l .lines-arrow:after {
	top:-.35rem;
	width:1.25rem;
	-webkit-transform:rotate3d(0, 0, 1, 0);
	-moz-transform:rotate3d(0, 0, 1, 0);
	-ms-transform:rotate3d(0, 0, 1, 0);
	-o-transform:rotate3d(0, 0, 1, 0);
	transform:rotate3d(0, 0, 1, 0)
}

.btn-l-r {
	left:0
}

.oprbtns {
	position:absolute;
	width:200px;
	height:50px;
	top:10px;
	right:10px
}

.container, .right {
	overflow:hidden;
	position:relative
}

.oprbtns .btn {
	width:40px;
	height:40px
}

.oprbtns .btn-src {
	z-index:50;
	right:10px;
	background-color:#0f9d58
}

.btn-refresh {
	right:10px;
	background-color:#00acc1;
	-webkit-transition:ease .3s;
	-moz-transition:ease .3s;
	-ms-transition:ease .3s;
	-o-transition:ease .3s;
	transition:ease .3s
}

.refresh_show .btn-src {
	box-shadow:0 3px 6px rgba(0, 0, 0, .2)
}

.refresh_show .btn-refresh {
	right:70px;
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, .2);
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, .2);
	box-shadow:0 3px 6px rgba(0, 0, 0, .2)
}

.container {
	overflow-x:hidden;
	height:100%
}

.right {
	left:0;
	z-index:10
}

.CodeMirror {
	font-family:monospace;
	height:300px;
	color:#000
}

.CodeMirror-lines {
	padding:4px 0
}

.CodeMirror pre {
	padding:0 4px
}

.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {
	background-color:#fff
}

.CodeMirror-gutters {
	border-right:1px solid #ddd;
	background-color:#f7f7f7;
	white-space:nowrap
}

.CodeMirror-linenumber {
	padding:0 3px 0 5px;
	min-width:20px;
	text-align:right;
	color:#999;
	white-space:nowrap
}

.CodeMirror-guttermarker {
	color:#000
}

.CodeMirror-guttermarker-subtle {
	color:#999
}

.CodeMirror-cursor {
	border-left:1px solid #000;
	border-right:none;
	width:0
}

.CodeMirror div.CodeMirror-secondarycursor {
	border-left:1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
	width:auto;
	border:0;
	background:#7e7
}

.cm-fat-cursor div.CodeMirror-cursors {
	z-index:1
}

.cm-animate-fat-cursor {
	width:auto;
	border:0;
	-webkit-animation:blink 1.06s steps(1) infinite;
	-moz-animation:blink 1.06s steps(1) infinite;
	animation:blink 1.06s steps(1) infinite;
	background-color:#7e7
}

@-moz-keyframes blink {
	50% {
		background-color:transparent
	}
}

@-webkit-keyframes blink {
	50% {
		background-color:transparent
	}
}

@keyframes blink {
	50% {
		background-color:transparent
	}
}

.cm-tab {
	display:inline-block;
	text-decoration:inherit
}

.CodeMirror-ruler {
	border-left:1px solid #ccc;
	position:absolute
}

.cm-s-default .cm-header {
	color:#00f
}

.cm-s-default .cm-quote {
	color:#090
}

.cm-negative {
	color:#d44
}

.cm-positive {
	color:#292
}

.cm-header, .cm-strong {
	font-weight:700
}

.cm-em {
	font-style:italic
}

.cm-link {
	text-decoration:underline
}

.cm-strikethrough {
	text-decoration:line-through
}

.cm-s-default .cm-keyword {
	color:#708
}

.cm-s-default .cm-atom {
	color:#219
}

.cm-s-default .cm-number {
	color:#164
}

.cm-s-default .cm-def {
	color:#00f
}

.cm-s-default .cm-variable-2 {
	color:#05a
}

.cm-s-default .cm-variable-3 {
	color:#085
}

.cm-s-default .cm-comment {
	color:#a50
}

.cm-s-default .cm-string {
	color:#a11
}

.cm-s-default .cm-string-2 {
	color:#f50
}

.cm-s-default .cm-meta, .cm-s-default .cm-qualifier {
	color:#555
}

.cm-s-default .cm-builtin {
	color:#30a
}

.cm-s-default .cm-bracket {
	color:#997
}

.cm-s-default .cm-tag {
	color:#170
}

.cm-s-default .cm-attribute {
	color:#00c
}

.cm-s-default .cm-hr {
	color:#999
}

.cm-s-default .cm-link {
	color:#00c
}

.cm-invalidchar, .cm-s-default .cm-error {
	color:red
}

.CodeMirror-composing {
	border-bottom:2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
	color:#0f0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
	color:#f22
}

.CodeMirror-matchingtag {
	background:rgba(255, 150, 0, .3)
}

.CodeMirror-activeline-background {
	background:#e8f2ff
}

.CodeMirror {
	position:relative;
	overflow:hidden;
	background:#fff
}

.CodeMirror-scroll {
	overflow:scroll !important;
	margin-bottom:-30px;
	margin-right:-30px;
	padding-bottom:30px;
	height:100%;
	position:relative
}

.CodeMirror-sizer {
	position:relative;
	border-right:30px solid transparent
}

.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar {
	position:absolute;
	z-index:6;
	display:none
}

.CodeMirror-vscrollbar {
	right:0;
	top:0;
	overflow-x:hidden;
	overflow-y:scroll
}

.CodeMirror-hscrollbar {
	bottom:0;
	left:0;
	overflow-y:hidden;
	overflow-x:scroll
}

.CodeMirror-scrollbar-filler {
	right:0;
	bottom:0
}

.CodeMirror-gutter-filler {
	left:0;
	bottom:0
}

.CodeMirror-gutters {
	position:absolute;
	left:0;
	top:0;
	z-index:3
}

.CodeMirror-gutter {
	white-space:normal;
	height:100%;
	display:inline-block;
	margin-bottom:-30px
}

.CodeMirror-gutter-wrapper {
	position:absolute;
	z-index:4;
	background:0 0 !important;
	border:none !important;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none
}

.CodeMirror-gutter-background {
	position:absolute;
	top:0;
	bottom:0;
	z-index:4
}

.CodeMirror-gutter-elt {
	position:absolute;
	cursor:default;
	z-index:4
}

.CodeMirror-lines {
	cursor:text;
	min-height:1px
}

.CodeMirror pre {
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
	border-width:0;
	background:0 0;
	font-family:inherit;
	font-size:inherit;
	margin:0;
	white-space:pre;
	word-wrap:normal;
	line-height:inherit;
	color:inherit;
	z-index:2;
	position:relative;
	overflow:visible;
	-webkit-tap-highlight-color:transparent
}

.CodeMirror-wrap pre {
	word-wrap:break-word;
	white-space:pre-wrap;
	word-break:normal
}

.CodeMirror-linebackground {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:0
}

.CodeMirror-linewidget {
	position:relative;
	z-index:2;
	overflow:auto
}

.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {
	-moz-box-sizing:content-box;
	box-sizing:content-box
}

.CodeMirror-measure {
	position:absolute;
	width:100%;
	height:0;
	overflow:hidden;
	visibility:hidden
}

.CodeMirror-cursor {
	position:absolute
}

.CodeMirror-measure pre {
	position:static
}

div.CodeMirror-cursors {
	visibility:hidden;
	position:relative;
	z-index:3
}

.CodeMirror-focused div.CodeMirror-cursors, div.CodeMirror-dragcursors {
	visibility:visible
}

.CodeMirror-selected {
	background:#d9d9d9
}

.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
	background:#d7d4f0
}

.CodeMirror-crosshair {
	cursor:crosshair
}

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
	background:#d7d4f0
}

.cm-searching {
	background:#ffa;
	background:rgba(255, 255, 0, .4)
}

.cm-force-border {
	padding-right:.1px
}

@media print {
	.CodeMirror div.CodeMirror-cursors {
		visibility:hidden
	}
}

span.CodeMirror-selectedtext {
	background:0 0
}

.left {
	left:0;
	right:0;
	position:fixed;
	width:150px;
	min-height:100%;
	background:transparent;
	color:#bee9ff;
	-webkit-transition:transform .5s;
	-moz-transition:transform .5s;
	-ms-transition:transform .5s;
	-o-transition:transform .5s;
	transition:transform .5s
}

.l-trf {
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
}

.l-trf-r {
	-webkit-transform:translate3d(50%, 0, 0);
	-moz-transform:translate3d(50%, 0, 0);
	-ms-transform:translate3d(50%, 0, 0);
	-o-transform:translate3d(50%, 0, 0);
	transform:translate3d(50%, 0, 0)
}

.nav {
	top:3%;
	position:absolute;
	bottom:0;
	left:3%;
	right:0;
	width:20%;
	height:500px;
	max-width:200px;
	overflow-y:auto;
	background: rgba(0,11,38,0.6);
	border: 1px solid #247087;
	z-index:99999;
}

.nav .examples {
	color:#337ab7
}
.nav ul {
	margin:10px 0;
}
.nav ul li {
	margin-left:0;
	padding-left: 20px
}

.nav ul li ul li {
	margin-left:0
}

.nav ul li a {
	display:block;
	margin:0 0;
	overflow:hidden;
	text-decoration:none;
	height:150px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:300px 300px;
}
.nav .title {
	width:100%;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#bee9ff;
	font-size:16px;
	background:url("../img/title_bg.png") center no-repeat;
	background-size:100% 100%;
}
.nav label {
	display:block;
	height:20px;
	line-height:20px;
	color:#bee9ff;
}
.nav label input {
	margin:-2px 5px 0 0;
}

@media (max-width: 1600px) {
	.nav {
		height:496px !important;
		overflow-y:auto;
	}

}

.right {
	width:100%;
	height:100%;
	-webkit-transition:transform .5s;
	-moz-transition:transform .5s;
	-ms-transition:transform .5s;
	-o-transition:transform .5s;
	transition:transform .5s
}

.right .allexamples, .right .home {
	position:absolute;
	width:100%;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	top:0;
	left:0
}

.right .home {
	z-index:60;
	height:100%;
	background-color:#fbf9f3;
	-webkit-transition:all .5s;
	transition:all .5s
}

.right .home .home-inner {
	padding:40px 10px
}

.right .allexamples {
	z-index:50;
	overflow:hidden;
	padding-bottom:20px;
	background-color:#ececec;
	-webkit-transition:all .1s;
	transition:all .1s
}

.right .allexamples .all-inner {
	overflow:hidden;
	-webkit-transition:all .7s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	transition:all .7s
}

.right .allexamples .all-inner .item {
	position:relative;
	float:left;
	margin-top:15px;
	margin-left:15px;
	width:300px;
	height:200px;
	cursor:pointer
}

.right .allexamples .all-inner .item p {
	display:none;
	position:absolute;
	top:0;
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	color:#fff;
	background:rgba(0, 0, 0, .7);
	opacity:0
}

.right #code, .right .CodeMirror-wrap {
	height:100%
}

.right .effect {
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	width:100%;
	height:100%;
	background:#fff;
	-webkit-transition:transform .5s;
	-moz-transition:transform .5s;
	-ms-transition:transform .5s;
	-o-transition:transform .5s;
	transition:transform .5s
}

.right .effect iframe {
	width:100%;
	height:100%;
	overflow:hidden
}

.right .effect-r {
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
}

.right .effect-l {
	-webkit-transform:translate3d(100%, 0, 0);
	-moz-transform:translate3d(100%, 0, 0);
	-ms-transform:translate3d(100%, 0, 0);
	-o-transform:translate3d(100%, 0, 0);
	transform:translate3d(100%, 0, 0)
}

.r-trf {
	-webkit-transform:translate3d(300px, 0, 0);
	-moz-transform:translate3d(300px, 0, 0);
	-ms-transform:translate3d(300px, 0, 0);
	-o-transform:translate3d(300px, 0, 0);
	transform:translate3d(150px, 0, 0)
}

.r-trf-l {
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
}

.r-trf-l .allexamples, .r-trf-l .home {
	width:100%
}
